<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画animate</title>
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular-animate.min.js"></script>
    <style>
        div {
            transition: all linear 0.5s;
            background-color: lightblue;
            height: 100px;
            width: 100%;
            position: relative;
            top: 0;
            left: 0;
        }

        .ng-hide {
            height: 0;
            width: 0;
            background-color: transparent;
            top:-200px;
            left: 200px;
        }

        .ng-show {
            height: 300px;
            background-color: transparent;
            top:-200px;
            left: 200px;
        }

    </style>
</head>
<body ng-app="ngAnimate">

隐藏 DIV: <input type="checkbox" ng-model="myCheck">
隐藏 DIV: <input type="checkbox" ng-model="myCheck2">

<div ng-hide="myCheck"></div>
<div ng-show="myCheck2"></div>

</body>
</html>